<template>
  <div class="parent">
    <px-radio-group v-model="groupValue" @change="radioChange">
      <px-radio-button label="中温系统" value="9-10" />
      <px-radio-button label="低温系统" value="7-8" />
    </px-radio-group>
    <echartDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="width" :height="height" :option="option" :type="type" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watchEffect } from "vue";
import echartDom from "./chartDom.vue";
import { getChartData, queryPredicated } from "@/api/machineFreezeHouseAPI";

import { watch } from "fs";
import { nextTick } from "process";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  type: {
    type: String,
    default: ""
  },
  chartData: {
    type: Object,
    default: () => {}
  },
  currentData: {
    type: Object,
    default: () => {}
  }
});
const isShowEcharts = ref(false);
const groupValue = ref("中温系统");
let obj = {
  中温系统: "9-10",
  低温系统: "7-8"
};

const state = reactive({
  option: {},
  axisData: [],
  predicetedCOPDataWidthOptimize: [],
  predicetedCOPDataWidthoutOptimize: [],
  actualCopData: [],
  targetCopData: []
});
const { option, axisData, predicetedCOPDataWidthOptimize, predicetedCOPDataWidthoutOptimize, actualCopData, targetCopData } = toRefs(state);

const requestStatusCodes = {
  "11": "Predicted COP",
  "12": "Actiual COP",
  "13": "External Temperature"
};

// watchEffect(() => {
//   console.log(props.chartData, "props.chartData");

//   if (isShowEcharts.value) getoptions();
// });

const getoptions = () => {
  const colors = ["#4786FF", "pink", "#14C7C7", "purple"];

  let subLineType = obj[groupValue.value]?.split("-")?.map(i => Number(i));

  queryPredicated({
    lineType: [3],
    // subLineType:[],
    subLineType: subLineType,
    timePeriod: "",
    dateRange: "",
    startDate: "",
    endDate: ""
  }).then((res: any) => {
    isShowEcharts.value = true;
    axisData.value = [];
    // 如果不需要轮询去获取增量数据则每次清空旧数据，如需要轮询获取增量数据则此处删除，增加轮询接口逻辑
    predicetedCOPDataWidthOptimize.value = [];
    actualCopData.value = [];
    for (const key in res?.lineInfo) {
      const element = res?.lineInfo[key];
      // if (key == "9") {
      //   element.forEach(item => {
      //     axisData.value.push(item.timeValue);
      //     predicetedCOPDataWidthOptimize.value.push(item.value);
      //   });
      // }
      // if (key == "10") {
      //   element.forEach(item => {
      //     predicetedCOPDataWidthoutOptimize.value.push(item.value);
      //   });
      // }
      // if (key == "7") {
      //   element.forEach(item => {
      //     actualCopData.value.push(item.value);
      //   });
      // }
      // if (key == "8") {
      //   element.forEach(item => {
      //     targetCopData.value.push(item.value);
      //   });
      // }
      if (key == "9" || key == "7") {
        element.forEach(item => {
          axisData.value.push(item.timeValue);
          predicetedCOPDataWidthOptimize.value.push(item.value);
        });
      }
      if (key == "10" || key == "8") {
        element.forEach(item => {
          actualCopData.value.push(item.value);
        });
      }
    }
    const resultAry = Object.keys(res?.lineInfo);
    const seriesObj = {
      7: "low Temperature",
      8: "low Temperature",
      9: "Medium Temperature",
      10: "Medium Temperature"
    };
    const series = [
      {
        name: `${seriesObj[resultAry[0]]} Predicted COP with Optimization`,
        data: predicetedCOPDataWidthOptimize.value,
        type: "line",
        lineStyle: {
          width: 3,
          color: "#4786FF"
        },
        smooth: true,
        yAxisIndex: 0
      },
      {
        name: `${seriesObj[resultAry[1]]} Actual COP(SCADA Readings)`,
        data: actualCopData.value,
        type: "line",
        lineStyle: {
          color: "#14C7C7",
          width: 3,
          type: "dashed"
        }
      }
    ];
    nextTick(() => {
      option.value = {
        backgroundColor: props.type == "dark" ? "#001e3b" : "",
        color: colors,
        title: {
          text: "Predicted, Actual and Target COP",
          top: "2",
          left: "center"
        },
        grid: {
          left: "20px",
          top: "70px",
          right: "10px",
          bottom: "10px",
          containLabel: true
        },
        legend: {
          data: [`${seriesObj[resultAry[0]]} Predicted COP with Optimization`, `${seriesObj[resultAry[1]]} Actual COP(SCADA Readings)`],
          top: "30"
        },
        tooltip: {
          trigger: "axis",
          formatter: (val: any) => {
            // console.log(val, "val222");
            const valStrArr = val.map(item => {
              if (item.seriesName === "Prediction Error Band") {
                return `${item.marker}${item.seriesName}:20<br/>`;
              } else {
                return `${item.marker}${item.seriesName}:${item.value}<br/>`;
              }
            });
            return valStrArr.join("");
          }
        },
        xAxis: {
          name: "",
          type: "category",
          boundarGap: false,
          data: axisData.value,
          axisPointer: {
            type: "shadow"
          }
        },
        yAxis: [
          {
            name: "COP",
            type: "value",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#4786FF"
              }
            },
            min: function (value) {
              return Math.floor(value.min * 10) / 10;
            },
            max: function (value) {
              return Math.ceil(value.max * 10) / 10;
            }
          }
        ],
        series: series
        // series: [
        //   {
        //     name: "Predicted COP with Optimization",
        //     data: predicetedCOPDataWidthOptimize.value,
        //     type: "line",
        //     lineStyle: {
        //       width: 3,
        //       color: "#4786FF"
        //     },
        //     smooth: true,
        //     yAxisIndex: 0
        //   },
        //   {
        //     name: "Predicted COP without Optimization",
        //     data: predicetedCOPDataWidthoutOptimize.value,
        //     type: "line",

        //     lineStyle: {
        //       color: "pink",
        //       width: 3,
        //       type: "solid"
        //     },
        //     smooth: true
        //   },
        //   {
        //     name: "Actual COP(SCADA Readings)",
        //     data: actualCopData.value,
        //     type: "line",
        //     lineStyle: {
        //       color: "#14C7C7",
        //       width: 3,
        //       type: "dashed"
        //     }
        //   },
        //   {
        //     name: "Target COP(Customer Ideal)",
        //     data: targetCopData.value,
        //     type: "line",
        //     lineStyle: {
        //       color: "purple",
        //       width: 2,
        //       type: "dashed"
        //     },
        //     smooth: true
        //   }
        // ]
      };
    });

    console.log(option.value, "option.-====");
  });
};
const radioChange = () => {
  getoptions();
};
getoptions();
</script>

<style scoped lang="scss">
.parent {
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
